/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, BlobInputList, IconCheckSquare, IconSquare, InputLine, CheckSwitch, CCell, Table, TableRow, TableBody, Cell, LineColumn,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {sel有无} from "./MaterialReview";

export const sel符合=['符合','不符合','未检查'];
const sel完好=['完好' ];
const sel合格=['合格' ];
const sel损坏=['完好','损坏','无此项' ];
export const sel完好无=['完好','无此项' ];
export const sel合格无=['合格','无此项' ];
const sel破损=['完好','破损','无此项' ];

const dx伸缩器=[['缩损坏','损坏'],['缩扭曲','轴向不稳定、扭曲变形'],['缩障碍','有限制位移的障碍物']];
const dx地面装置=[['面标错','标志错误或不清'],['面标不','标志不全'],['面标无','标志无']];
const dx地表环境=[['表距超','净距超标'],['表道占压','管道占压'],['表裸露','管道裸露'],['表土扰','土壤扰动']];
const dx锚固礅=[['礅开裂','风化开裂、非正常变形'],['礅滑移','基础滑移、倾斜、下沉'],['礅淘空','基础被冲刷或被淘空'],['礅损坏','损坏']];
const dx钢绳索=[['索变形','变形'],['索腐蚀','腐蚀'] ];
const dx穿管段=[['穿敦损','锚固敦损坏'],['穿查孔破','检查孔破损'],['穿稳管','稳管措施损坏'],['穿河流刷','河流冲刷']];
const dx凝水缸=[['缸定排','定期排放'],['缸泄漏','泄漏'],['缸腐蚀','腐蚀'],['缸堵塞','堵塞']];
const dx阀门=[['门腐蚀','腐蚀'],['门裂纹','裂纹'],['门积水','护管内积水'],['门缩孔','缩孔'],['门栓松','连接螺栓松动'],['门不灵','操作不灵活'],['门泄漏','泄漏']];
const dx法兰=[['兰偏口','偏口'],['兰紧固','紧固件不齐全'],['兰不符','不符合要求'],['兰松动','松动'],['兰腐蚀','腐蚀'],['兰面翘','法兰面翘曲、变形'],['兰泄漏','泄漏']];
const dx补偿节=[['偿损坏','损坏'],['偿扭曲','轴向不稳定、扭曲变形'],['偿障碍','有限制位移的障碍物']];
const dx钢塑接=[['接腐蚀','腐蚀'],['接裂纹','裂纹'] ];
const dx阀门井=[['井盖破','井盖破损'],['井打不','部分井盖打不开'],['井积水','井内积水'],['井示踪','无示踪线'] ];
const dx水工保=[['水塌陷','地面塌陷'],['水变形','防护设施变形、损坏'],['水裸露','管道裸露'] ];

//两层的(嵌套的配置) 第二层解构的第三个参数：表示是不是支持多选的，若=true的话，那么会有第5个参数来表达多选形式的存储列表配置项。
const items宏观=[
    ['地面泄漏情况',[ ['泄漏情',undefined,false,sel有无],
    ] ],
    ['位置与走向',[ ['道位置','管道位置',false,sel符合],
        ['道埋深','管道埋深',false,sel符合],
        ['道走向','管道走向',false,sel符合]
    ] ],
    ['地面装置',[ ['面装置',undefined,true,sel完好, dx地面装置],
    ] ],
    ['管道沿线地表环境',[ ['地表环',undefined,true,sel合格, dx地表环境],
    ] ],
    ['跨越管段',[ ['腐保温','防腐保温层',false,sel损坏],
        ['伸缩补','伸缩器和补偿器',true,sel完好无, dx伸缩器],
        ['锚固礅','锚固礅',true,sel完好无, dx锚固礅],
        ['钢绳索','钢结构、钢丝绳、索具及其连接件',true,sel完好无, dx钢绳索]
    ] ],
    ['穿越管段',[ ['穿管段',undefined,true,sel完好无, dx穿管段],
    ] ],
    ['凝水缸',[ ['凝水缸',undefined,true,sel完好无, dx凝水缸],
    ] ],
    ['阀门',[ ['阀门',undefined,true,sel完好无, dx阀门],
    ] ],
    ['法兰',[ ['法兰',undefined,true,sel完好无, dx法兰],
    ] ],
    ['补偿节',[ ['补偿节',undefined,true,sel完好无, dx补偿节],
    ] ],
    ['可见部位防腐(保温)层',[ ['防腐层',undefined,false,sel破损],
    ] ],
    ['钢塑转换接头',[ ['钢塑接',undefined,true,sel完好无, dx钢塑接],
    ] ],
    ['阀门井',[ ['阀门井',undefined,true,sel合格无, dx阀门井],
    ] ],
    ['水工保护设施',[ ['水工保',undefined,true,sel完好无, dx水工保],
    ] ]
];

export const itemA宏观检查: string[] = ['宏观意见', ];
//存储
for(let part of items宏观){
    let confs=part[1] as any[];
    confs.forEach((item, w) => {
        itemA宏观检查.push(item[0]);
        if(item[2]){
            const dxCfg=item[4] as any[];
            dxCfg.forEach(([name, title], i: number) => {
                itemA宏观检查.push(name as string);
            });
        }
    });
}
//除非铁定单一打勾：选”完好“ "无此项/" ”“：其余多选的。
export const Macroscopic =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    let seq=0;
    const {inp, setInp} = useItemInputControl({ref});
    const [getInpFilter] = useMeasureInpFilter(null, itemA宏观检查,);
    return (
    <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                         alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        注：单选项的录入是优先覆盖后面的多选项，要多选的需清空单选项。
        {items宏观.map((part: any, a:number) =>
            <div key={a}>
                {part[1].map((item: any, w:number) =>
                    <div key={w}>
                        <Text variant="h6">{++seq}，{part[0]} - {item[1]}：</Text>
                        <LineColumn column={8}>
                            <InputLine label='单选项'>
                                <BlobInputList value={inp?.[item[0]] ||''}  rows={1}  datalist={item[3]}
                                               onListChange={v => setInp({...inp, [item[0]]: v || undefined})}/>
                            </InputLine>
                            { item[4]?.map(([name,desc] : any, i:number)=> {
                                return <InputLine key={i} label={desc}>
                                    <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                                </InputLine>;
                            }) }
                        </LineColumn>
                    </div>
                )}
            </div>
        )}
        <Text variant="h5">宏观检查发现的问题与处理意见：</Text>
        <TextArea  value={inp?.宏观意见 ||''} rows={13}
                   onChange={e => setInp({ ...inp, 宏观意见: e.currentTarget.value||undefined}) } />
        {children}
    </InspectRecordLayout>
    );
});

//单选项目的内容优先显示，没它才显示多选项。
export const MacroscopicVw= ({orc, rep,op} :{orc:any, rep:any,op?:boolean}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
            <Text id='Macroscopic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>宏观检查{op?'记录':'报告'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["10.1%", "2.5%", "16.1%", "%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Macroscopic'}>
                    <TableRow>
                        <CCell colSpan={3}>检查项目</CCell><CCell>检查结果（在合适选项前的“□”内打“√”）</CCell>
                    </TableRow>
                    {items宏观.map((part: any, a:number) => <React.Fragment key={a}>
                            {part[1].map((item: any, w:number) => <TableRow key={w}>
                                    { 0===w && <CCell colSpan={2} rowSpan={part[1].length}>{part[0]}</CCell>
                                    }
                                    {item[1] && <CCell>{item[1]}</CCell>}
                                    <CCell colSpan={item[1]? 1:2}>
                                        {orc?.[item[0]] ?  orc?.[item[0]]
                                            :
                                            item[2]?
                                                <div css={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap',justifyContent: 'space-around'}}>
                                                {item[4].map(([name, desc]: any, i: number) =>
                                                    <div key={i} css={{display: 'flex', alignItems: 'center'}}>
                                                        {orc?.[name] ?
                                                        <IconCheckSquare size='sm'/> :
                                                        <IconSquare size='sm'/>}&nbsp;{desc}&nbsp;
                                                    </div>
                                                )}
                                                </div>
                                              :
                                               '／'
                                        }
                                    </CCell>
                                </TableRow>
                            )}
                        </React.Fragment>
                    )}
                    <TableRow>
                        <CCell>宏观检查发现的问题与处理意见</CCell>
                        <Cell colSpan={3}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>{orc.宏观意见 ?? '／'}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck cap={'检查'} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
